<template>
  <div class="home">
    <app-title :title="currentTab.title"></app-title>
    <app-main></app-main>
    <tab :tabData='tabData' :currentTab='currentTab.tabUrl' @changeIndex='changeIndex'></tab>
  </div>
</template>
<script>
import AppMain from './AppMain'
import AppTitle from './Title'
import Tab from './Tab'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      tabValue: 'film',
      tabData: [{title: '电影', icon: 'film', path: '/film', value: 'film'},
        {title: '影院', icon: 'cinema', path: '/cinema', value: 'cinema'},
        {title: '我的', icon: 'mine', path: '/mine', value: 'mine'}]
    }
  },
  computed: {
    ...mapGetters(['currentTab', 'appTitle'])
  },
  mounted () {

  },
  methods: {
    changeIndex (val) {
      console.log(val)
    }
  },
  components: {
    AppMain,
    Tab,
    AppTitle
  }
}
</script>

<style lang="scss">
@import "../../../styles/common/var";
.home{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .app-title{
    width: 100%;
    height: $--tab-height;
    line-height: $--tab-height;
    position: absolute;
    top: 0;
    z-index: 10001;
    background: $--color-red;
  }
  .app-main{
    width: 100%;
    position: absolute;
    top: $--tab-height;
    right: 0;
    bottom: $--title-height;
    left: 0;
    z-index: 1000;
    overflow-y: scroll;
    background: $--color-white;
  }
  .tab{
    width: 100%;
    height: $--title-height;
    border-top: 1px solid $--color-gray;
    position: fixed;
    bottom: 0;
    z-index: 10001;
    background: $--color-white;
  }
}
</style>
